<template>
  <el-form ref="loginSmsFormRef" :model="loginSmsData" :rules="loginSmsRules">
    <!-- 用户名 -->
    <el-form-item prop="phone">
      <div class="input-wrapper">
        <el-icon class="mx-2">
          <User />
        </el-icon>
        <el-input
          ref="phone"
          v-model="loginSmsData.phone"
          placeholder="请输入手机号码"
          name="phone"
          size="large"
          class="h-[48px]"
          maxlength="11"
        />
      </div>
    </el-form-item>

    <!-- 密码 -->
    <el-form-item prop="code">
      <div class="input-wrapper">
        <el-icon class="mx-2">
          <Lock />
        </el-icon>
        <el-input
          v-model="loginSmsData.code"
          placeholder="请输入验证码"
          type="password"
          name="code"
          size="large"
          class="h-[48px] pr-2"
          @keyup.enter="handleLoginSubmit"
        >
          <template #append>
            <el-button
              class="send-code-btn"
              :disabled="isSending || countdown > 0"
              @click="sendCode"
            >
              {{ countdown > 0 ? `${countdown}秒后重试` : "获取验证码" }}
            </el-button>
          </template>
        </el-input>
      </div>
    </el-form-item>
  </el-form>
</template>
<script setup>
const loginSmsFormRef = ref();
/**
 * 短信登录
 *
 *
 */
const loginSmsData = ref({
  phone: "",
  code: "",
});
const loginSmsRules = computed(() => {
  return {
    phone: [
      {
        required: true,
        trigger: "blur",
        message: "请输入手机号码",
      },
    ],
    code: [
      {
        required: true,
        trigger: "blur",
        message: "请输入验证码",
      },
    ],
  };
});
const isSending = ref(false); // 是否正在发送验证码
const countdown = ref(0); // 验证码倒计时

// 发送验证码
const sendCode = async () => {
  console.log(loginSmsFormRef.value?.validateField("phone"));
  loginSmsFormRef.value?.validateField("phone", async (valid) => {
    if (valid) {
      try {
        isSending.value = true;
        countdown.value = 60; // 设置倒计时为60秒
        const data = await CommonAPI.captchaSmse({ mobile: loginSmsData.value.phone });
        console.log(data);
        ElMessage.success("验证码已发送，请注意查收");
      } catch (error) {
        ElMessage.error("验证码发送失败");
      } finally {
        const interval = setInterval(() => {
          countdown.value--;
          if (countdown.value <= 0) {
            clearInterval(interval);
            isSending.value = false;
          }
        }, 1000);
      }
    } else {
      ElMessage.error("请输入有效的手机号码");
    }
  });
  // if (valid) {
  //   try {
  //     isSending.value = true;
  //     countdown.value = 60; // 设置倒计时为60秒
  //     const data = await CommonAPI.captchaSmse({ phone: formData.phone });
  //       console.log(data);
  //       ElMessage.success("验证码已发送，请注意查收");
  //     } catch (error) {
  //       ElMessage.error("验证码发送失败");
  //     } finally {
  //       const interval = setInterval(() => {
  //         countdown.value--;
  //         if (countdown.value <= 0) {
  //           clearInterval(interval);
  //           isSending.value = false;
  //         }
  //       }, 1000);
  //     }
  //   } else {
  //     ElMessage.error("请输入有效的手机号码");
  //   }
  // });
};
</script>
